<template>
	<view class="page">
		<view class="top content">
			<u-steps :current="current">
				<u-steps-item title="品牌"></u-steps-item>
				<u-steps-item title="车系" ></u-steps-item>
				<u-steps-item title="车型"></u-steps-item>
			</u-steps>
		</view>
		<view class="top clik">
			<view @click="clickcurrent(0)"></view>
			<view @click="clickcurrent(1)"></view>
			<view @click="clickcurrent(2)"></view>
		</view>
		<brand v-if="current==0" @brand="current=1"></brand>
		<car-series v-else-if="current==1" @carseries="current=2"></car-series>
		<car-type  v-else @cartype="$goBack(1)"></car-type>
	</view>
</template>

<script>
	import Brand from './brand/brand.vue'
	import CarSeries from './carseries/carseries.vue'
	import CarType from './cartype/cartype.vue'
	export default {
		data() {
			return {
				current:0
			}
		},
		components:{Brand,CarSeries,CarType},
		methods: {
			clickcurrent(i){
				let brand= this.$store.state.brand
				let carseries= this.$store.state.carseries
				if(i==1){
					console.log(brand)
					if(brand==""){
						return false
					}
				}else if(i==2){
					console.log(carseries)
					if(carseries==""){
						return false
					}
				}
				this.current=i
			}
		},
		onLoad() {
			
		},
	}
</script>

<style scoped lang="scss">
.page{
		position: relative;
	}
.content{
	margin:16rpx;
	background-color:#fff;
	border-radius: 10rpx;
	}
.top{
	width:718rpx ;
	height: 128rpx;
	padding-top: 20rpx;
}

.clik{
	position: absolute;
	top: 10rpx;
	opacity: 0;
	@include flex(row, space-around, center)
	view{
		width: 100rpx;
		height: 100rpx;
		
	}
}
</style>
